<!-- 第一部分：结构 -->
<template>
  <!-- vue2中只能有一个根元素， vue3中已经没有这样的限制了 -->
  <div class="App">
    我的结构
    <div class="box" v-on:click="fn()">内部盒子</div>
  </div>
</template>


<!-- 第三部分：行为 -->
<script>
// 导出当前组件的配置项
// 里面可以提供 data（特殊） methods computed watch 生命周期等
export default {
  created() {
    console.log("响应式数据完成");
  },
  methods: {
    fn() {
      console.log("这是一个点击事件");
      alert("测试点击事件");
    },
  },
};
</script>


<!-- 第二部分：样式 -->
<style lang="less">
/* 让style支持less需要两个步骤
  1.给style 添加 lang=less
  2.添加依赖 less 和 less-loader 
*/
.App {
  width: 400px;
  height: 400px;
  background-color: pink;
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
}
</style>
